<template>
  <div class="login home" :style="{ background: 'url(' + bg + ') no-repeat' }">
    <md-scroll-view ref="scrollView" :scrolling-x="false" :auto-reflow="true">
      <div class="home-wrapper">
        <div class="info-wrapper">
          <div class="avatar-wrapper">
            <a-avatar
              class="avatar"
              :size="64"
              v-if="!detailInfo.head_thumb"
              icon="user"
            />
            <a-avatar
              class="avatar"
              :size="64"
              v-else
              :src="formatImg(detailInfo.head_thumb)"
            />
          </div>
          <div class="info">
            <div class="name">
              {{ account ? account : "未认证会员" }}
            </div>
            <div class="account">账户名：{{ detailInfo.mobile_show }}</div>
            <div class="confirm_name"></div>
            <div class="confirm_box">
              <div class="watch_agree" @click="watchQy()">查看拼车车授权协议</div>
              <div  v-if="detailInfo.has_confirm!==2" class="watch_agree" @click="sureQy()">确认授权至拼车车</div>
              <div  v-else class="watch_agree   watch_agree_1">您已完成授权至拼车车</div>
            </div>
            <div class="confirm_box">
              <div class="watch_agree" @click="watchQyDk()">查看达客云授权协议</div>
              <div  v-if="detailInfo.has_confirm_dk!==2" class="watch_agree" @click="sureQyDk()">确认授权至达客云</div>
              <div  v-else class="watch_agree watch_agree_1">您已完成授权至达客云</div>
            </div>

          </div>
          <div @click="$commonJs.goPage('personInfo')">
            <a-icon type="right" />
          </div>
        </div>
      </div>
      <div class="invitationCode">
        <div>
          <p>我的邀请码：</p>
          <p>{{ detailInfo.invite }}</p>
        </div>
        <div>
          <p
            @click="copy()"
            :data-clipboard-text="
              $api.imgProjectUrl +
                '/mobile/#/register?invite=' +
                detailInfo.invite
            "
            id="copyBtn"
          >
            复制
          </p>
          <p @click="showPopUp('bottom')">分享</p>
        </div>
      </div>

      <md-popup v-model="isPopupShow.bottom" position="top">
        <md-popup-title-bar
          title="分享"
          ok-text="返回"
          cancel-text=""
          @confirm="hidePopUp('bottom')"
          @cancel="hidePopUp('bottom')"
        ></md-popup-title-bar>
        <div class="md-example-popup md-example-popup-bottom">
          <vshare class="share" :vshareConfig="vshareConfig">微信 </vshare>
        </div>
      </md-popup>

      <div class="cell-wrapper">
        <md-field>
          <md-cell-item
            title="余额"
            :addon="'￥' + detailInfo.money"
            arrow
            no-border
            @click="$commonJs.goPage('personBalance')"
          >
            <div class="iconfont iconyue" slot="left"></div>
          </md-cell-item>
        </md-field>
        <div class="common-style"></div>
        <md-field>
          <md-cell-item
            @click="$commonJs.goPage('personProject')"
            title="项目管理"
            arrow
          >
            <div class="iconfont iconxiangmuguanli" slot="left"></div>
          </md-cell-item>
          <md-cell-item
            @click="$commonJs.goPage('personFriends')"
            title="我的好友"
            arrow
          >
            <div class="iconfont icontianchongxing-" slot="left"></div>
          </md-cell-item>
          <md-cell-item
            @click="$commonJs.goPage('personSetting')"
            title="安全中心"
            arrow
          >
            <div class="iconfont iconanquanzhongxin" slot="left"></div>
          </md-cell-item>
          <md-cell-item
            @click="$commonJs.goPage('personBank')"
            title="我的银行卡"
            arrow
          >
            <div class="iconfont iconwodeyinhangka" slot="left"></div>
          </md-cell-item>
          <md-cell-item
            @click="$commonJs.goPage('personContract')"
            title="合同管理"
            arrow
          >
            <div class="iconfont iconhetongguanli" slot="left"></div>
          </md-cell-item>
          <md-cell-item
            @click="$commonJs.goPage('personMessage')"
            title="消息通知"
            arrow
            no-border
          >
            <div slot="left" class="message">
              <span class="iconfont iconxiaoxitongzhi"></span>
              <span class="dot" v-if="detailInfo.notice_num > 0"></span>
            </div>
          </md-cell-item>
        </md-field>
      </div>
    </md-scroll-view>
  </div>
</template>

<script>
import bg from "@/assets/img/bg04.png";
import {
  ScrollView,
  Field,
  CellItem,
  Switch,
  Popup,
  PopupTitleBar
} from "mand-mobile";
import { Avatar, Modal } from "ant-design-vue";
import "@/assets/fonticon/iconfont.css";
import Clipboard from "clipboard";
import router from "../../router";
export default {
  name: "",
  components: {
    vshare: () => import("@/components/share/vshare"),
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Field.name]: Field,
    [ScrollView.name]: ScrollView,
    [CellItem.name]: CellItem,
    [Switch.name]: Switch,
    [Avatar.name]: Avatar
  },
  data() {
    return {
      bg: bg,
      detailInfo: {
        money: 0
      },
      isPopupShow: {},
      vshareConfig: {
        shareList: [
          { name: "weixin", title: "微信" },
          { name: "sqq", title: "QQ好友" },
          { name: "tsina", title: "新浪微博" },
          { name: "qzone", title: "QQ空间" },
          { name: "renren", title: "人人网" }
          // 此处放分享列表（ID）
        ],
        common: {
          //此处放置通用设置
          bdText: "集影视文化、电影众筹于一体的泛文化泛娱乐众筹平台_【好融艺】",
          bdUrl: "",
          bdSign: "off"
        },
        share: [
          {
            //此处放置分享按钮设置
            bdSize: 32
          }
        ],
        slide: false,
        image: false,
        selectShare: false
      },
      has_confirm:''
    };
  },
  created() {
    this.getPersonInfo();
  },
  beforeCreate() {
    window._bd_share_main = "";
  },
  methods: {
    formatImg(url) {
      if (url.indexOf("uploads/headimg") !== -1) {
        return this.$api.imgProjectUrl + url;
      } else {
        return this.$api.imgProjectUrl + "/uploads/headimg/" + url;
      }
    },
    showPopUp(type) {
      this.$set(this.isPopupShow, type, true);
    },
    hidePopUp(type) {
      this.$set(this.isPopupShow, type, false);
    },
    getPersonInfo() {
      let that = this;
      this.$ajax
        .post(this.$api.getPerson)
        .then(res => {
          this.detailInfo = res.data;
          this.$store.dispatch("changeMobile", res.data.mobile);
          this.$store.dispatch("changeLoginStatus", true);
          this.$store.dispatch("changeValidate", res.data.is_check);
          this.$store.dispatch("changeSign", res.data.is_sign);
          this.$store.dispatch("changeMobileStatus", res.data.safeMobile);
          this.$store.dispatch("changeSetPay", res.data.pay_password);
          this.$store.dispatch("changeAccount", res.data.username);
          this.vshareConfig.common.bdUrl =
            this.$api.imgProjectUrl +
            "/#/register?invite=" +
            this.detailInfo.invite;
          if (!this.detailInfo.member_type) {
            Modal.confirm({
              title: "尊敬的用户：",
              content: "您还没有进行风险评估！",
              okText: "前往评估",
              cancelText: "取消",
              onOk() {
                that.$router.push({ name: "questionnaire" });
              }
            });
          }
          if(this.detailInfo.has_confirm!==2){
            this.has_confirm='(您尚未完成信息授权)'
          }else{
            this.has_confirm='(您已完成信息授权)'
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    copy() {
      var clipboard = new Clipboard("#copyBtn");
      clipboard.on("success", () => {
        // 释放内存
        this.$message.success("复制成功");
        clipboard.destroy();
      });
      clipboard.on("error", () => {
        // 不支持复制
        this.$message.warning("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    },
    watchQy(){
      if(this.detailInfo.qy_url){
        window.location.href = this.detailInfo.qy_url;
      }else{
        this.$message.warning("暂未查询到相关协议");
      }

    } ,
    watchQyDk(){
      if(this.detailInfo.qy_url_dk){
        window.location.href = this.detailInfo.qy_url_dk;
      }else{
        this.$message.warning("暂未查询到相关协议");
      }

    } ,
    sureQy(){
      let that=this
      if(this.detailInfo.qy_url){
        Modal.confirm({
          title: "请确认信息授权",
          content: "此操作将会同步会员信息至广东盛世昊通科技有限公司（董车长APP）",
          okText: "确定",
          cancelText: "取消",
          onOk() {
            that.$ajax
                    .post(that.$api.confirmQy, {})
                    .then(res => {
                      if(res.data.qy_url){
                        that.$message.success("操作成功");
                        setTimeout(function() {
                          window.location.href = res.data.qy_url;
                        }, 1000);
                      }

                    })
                    .catch(err => {
                      that.$message.error(err);
                    });
          },
          onCancel() {
          }
        });
      }else{
        this.$message.warning("暂未查询到相关协议");
      }
    },

    sureQyDk(){
      let that=this
      if(this.detailInfo.qy_url_dk){
        Modal.confirm({
          title: "请确认信息授权",
          content: "此操作将会同步会员信息至江西达客互联网科技有限公司",
          okText: "确定",
          cancelText: "取消",
          onOk() {
            that.$ajax
                    .post(that.$api.confirmQy, {'dk_type':2})
                    .then(res => {
                      if(res.data.qy_url_dk){
                        that.$message.success("操作成功");
                        setTimeout(function() {
                          window.location.href = res.data.qy_url_dk;
                        }, 1000);
                      }

                    })
                    .catch(err => {
                      that.$message.error(err);
                    });
          },
          onCancel() {
          }
        });
      }else{
        this.$message.warning("暂未查询到相关协议");
      }
    }


  },
  computed: {
    account() {
      return this.$store.state.account;
    }
  }
};
</script>

<style scoped lang="less">
.login {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-size: 100%, 100% !important;
}
.home-wrapper {
  padding: 90px 85px 100px 67px;
  color: @white;
  .info-wrapper {
    position: relative;
    .flex_content();
    .flex_align_center();
    .info {
      .flex_one();
      padding-left: 1rem;
    }
    .avatar-wrapper {
      width: 174px;
    }
    .avatar {
      background: #246ec3;
      webkit-box-shadow: 0 0 0 4px #fffbfb;
      -moz-box-shadow: 0 0 0 4px #fffbfb;
      box-shadow: 0 0 0 4px #fffbfb;
    }
    .name {
      font-size: 30px;
      margin-bottom: 20px;
      font-weight: bold;
    }
    .account {
      font-size: 20px;
    }
  }
}
.message {
  position: relative;
  .dot {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #f5222d;
  }
}
.iconfont {
  .linear_gradient_back(#fad683, #f8962d, #ef8028);
  font-size: 34px;
  -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
  -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
}
.invitationCode {
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  height: 100px;
  line-height: 100px;
  border-bottom: 1px solid #e2e4ea;
  padding: 0 42px;
  background-color: #ffffff;
}
.invitationCode > div {
  display: flex;
  align-items: center;
}
.invitationCode > div:first-child > p:last-child {
  color: #ef8028;
}
.invitationCode > div:last-child > p {
  height: 50px;
  padding: 0 25px;
  line-height: 50px;
  border: 1px solid #e2e4ea;
  border-radius: 40px;
}
.invitationCode > div:last-child > p:first-child {
  margin-right: 25px;
}
.popup {
  height: 100%;
  background-color: #ffffff;
}
.bdsharebuttonbox {
  background-color: #ffffff;
}
.share {
  display: flex;
  justify-content: center;
  padding-top: 30px;
  padding-bottom: 30px;
}
  .confirm_name{
    margin-top: 20px;
    font-size:20px ;
  }
  .watch_agree{
    margin-left: 0.2rem;
    margin-top: 20px;
    background-color: coral;
    padding: 5px,5px,5px,5px;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    width: 230px;
    height: 30px;
    border-radius: 10px;
    line-height: 30px;
  }
  .confirm_box{
    display: flex;
    flex-direction: row;
    justify-content: left;
  }
  .watch_agree_1{
    background-color: #5d5958;
  }
</style>
